import '../Car/Car.css'
import { Form, Input, Button, Select, Table, Popconfirm, Message, Modal } from '@arco-design/web-react';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'
import { IconExclamationCircle } from '@arco-design/web-react/icon';
import { useRef } from 'react';
import carApi from '../../API/carApi';

const FormItem = Form.Item;
const Option = Select.Option;



const Car = () => {

  const navigate = useNavigate()
  const wk = useRef(null)
  const [hideFrom] = Form.useForm()
  const [topFrom] = Form.useForm()


  //表头数据
  const columns = [
    {
      title: '车牌号码',
      dataIndex: 'carNum',
      align: 'center'//表格内容居中
    },
    {
      title: '月卡类型',
      dataIndex: 'monthcardType',
      align: 'center'
    },
    {
      title: '月卡状态',
      dataIndex: 'monthcardState',
      align: 'center',
      render: (col, record) => {
        if (record.monthcardState === 0) {
          return <span>正常</span>
        } else if (record.monthcardState === 1) {
          return <span>过期</span>
        } else if (record.monthcardState === -1) {
          return <span>暂停</span>
        }
      }
    },
    {
      title: '剩余天数',
      dataIndex: 'surplusDate',//字段名
      align: 'center'//表格内容居中
    },
    {
      title: '车主姓名',
      dataIndex: 'ownerName',
      align: 'center'
    },
    {
      title: '手机号码',
      dataIndex: 'ownerPhone',
      align: 'center'
    },
    {
      title: '车位号',
      dataIndex: 'parkingPalaceNum',
      align: 'center'
    },
    {
      title: '办理时间',
      dataIndex: 'createTime',
      align: 'center'
    },
    {
      title: '操作',
      align: 'center',
      render: (col, record) => (
        <div>
          <Popconfirm
            title='是否删除此数据'
            onOk={() => {
              delent(record)
              Message.info({
                content: '删除成功',
              });
            }}
            onCancel={() => {
              Message.error({
                content: '已取消',
              });
            }}
          >
            <Button style={{ marginRight: 10 }} status='danger' >
              删除
            </Button>
          </Popconfirm>

          <Button style={{ marginRight: 10 }} status='danger' onClick={() => reiwe(record)}>
            修改
          </Button>
          {record.monthcardState === 0 ? <Button status='danger' onClick={() => suspend(record)}>暂停</Button> : null}
          {record.monthcardState === -1 ? <Button status='danger' onClick={() => suspend(record)}>恢复</Button> : null}
          {record.monthcardState === 1 ? <Button disabled>过期</Button> : null}
        </div>
      ),
    },
  ];

  //批量操作
  const options = ['批量导入', '批量删除', '批量延期'];

  //------------------请求数据----------------------------------------
  //表单数据
  const [data, setData] = useState([])
  const getTableData = () => {
    carApi.getCarData().then((res) => {
      // console.log(res.result);
      setData(res.result)
    })
  }

  //获取所有车辆
  useEffect(() => {
    getTableData()
  }, [])

  //重置
  const resetBtn = () => {
    topFrom.clearFields()
    hideFrom.clearFields()
    getTableData()
  }

  //获取车辆类型数据
  const [a, setA] = useState([]);
  //获取车辆类型
  const selectFocus = () => {
    carApi.getCarType().then((res) => {
      //console.log(res.result);
      let obj = []
      for (let index = 0; index < res.result.length; index++) {
        obj.push({
          label: res.result[index],
          value: res.result[index]
        })
      }
      setA(obj)
    })
  }

  //多条件查询
  const inquire = () => {
    let value1 = topFrom.getFieldsValue()
    let value2 = hideFrom.getFieldsValue()
    let obj = {
      carNum: value1.carNum ? value1.carNum : "",
      carType: value1.carType ? value1.carType : "",
      monthcardType: value2.monthcardType ? value2.monthcardType : "",
      monthcardState: value2.monthcardState ? value2.monthcardState : "",
      carState: value2.carState ? value2.carState : "",
      ownerName: value2.ownerName ? value2.ownerName : "",
      ownerPhone: value2.ownerPhone ? value2.ownerPhone : "",
      parkingPalaceNum: value2.parkingPalaceNum ? value2.parkingPalaceNum : "",
    }
    // console.log(obj);
    carApi.getCarInquire(obj).then((res) => {
      // console.log(res);
      if (res.code === 200) {
        setData(res.result)
      }
    })
  }

  //删除单条数据
  const delent = (a) => {
    // console.log(a);
    // console.log(a.carId);
    carApi.getCarDele(a.carId).then((res) => {
      console.log(res);
      if (res.code === 200) {
        getTableData()
      }
    })
  }


  //暂停恢复
  const suspend = ({ carId, monthcardState }) => {
    monthcardState == -1 ? monthcardState = 0 : monthcardState = -1
    carApi.getCarResume(carId, monthcardState).then((res) => {
      getTableData()
    })

  }

  //修改
  const reiwe = (value) => {
    // console.log(value);
    setVisible(true)
    form.setFieldsValue(value)
    form.setFieldValue('renewDate', value.surplusDate)
  }


  /* 
  车牌号码String carNum
  车牌类型String carType
  月卡类型Integer monthcardType
  月卡状态Integer monthcardState
  黑白名单(车辆状态)String carState
  车主姓名String ownerName
  联系方式String ownerPhone
  停车位号String parkingPalaceNum
  */
  //---------------------------------------------------------------------------


  //编辑弹框
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [form] = Form.useForm();

  function onOk() {

    let value = form.getFieldsValue()
    console.log(value);
    carApi.getCarRevise(value).then((res) => {
      console.log(res);
      if (res.code === 200) {
        getTableData()
        Message.success('修改成功')
        setVisible(false)
      } else {
        Message.error('修改失败')
      }
    })
  }





  return (
    <div className='outline'>

      {/* 搜索框*/}
      <Form className='from' layout='inline' form={topFrom}>
        <FormItem label='车牌号码:' field='carNum'>
          <Input className='select' placeholder='请输入' />
        </FormItem>

        {/* 下拉框  */}
        <FormItem label='车牌类型:' field='carType' >
          <Select
            className='select'
            placeholder='请选择'
            options={a}
            onFocus={selectFocus}
          />
        </FormItem>

        <Button
          style={{ marginTop: 3, marginLeft: 90 }}
          type='primary'
          onClick={inquire}
        >
          查询
        </Button>
        <Button style={{ marginTop: 3, marginLeft: 40 }} onClick={resetBtn} >重置</Button>
        <Button
          style={{ marginTop: 3, color: '#165DFF', marginLeft: 50, background: '#6dfce9' }}
          onClick={() => { wk.current.style.height == '90px' ? wk.current.style.height = '0px' : wk.current.style.height = '90px' }}
        >
          更多
        </Button>
      </Form>

      {/* 下拉框 隐藏部分 */}
      <div className='wk' ref={wk} >
        <Form className='from' layout='inline' form={hideFrom}>
          <FormItem label='月卡类型:' field='monthcardType'>
            <Select
              className='select'
              placeholder='请选择'
              options={[
                {
                  label: '包月',
                  value: 0
                },
                {
                  label: '包季',
                  value: 1
                },
                {
                  label: '包年',
                  value: 2
                },
                {
                  label: '长期',
                  value: 3
                },
              ]}
            />
          </FormItem>

          <FormItem label='月卡状态:' field='monthcardState'>
            <Select
              className='select'
              placeholder='请选择'
              options={[
                {
                  label: '正常',
                  value: 0
                },
                {
                  label: '暂停',
                  value: -1
                },
                {
                  label: '过期',
                  value: 1
                },
              ]}
            />
          </FormItem>

          <FormItem label='黑白名单:' field='carState'>
            <Select
              className='select'
              placeholder='请选择'
              options={[
                {
                  label: '普通',
                  value: 0
                },
                {
                  label: '黑名单',
                  value: -1
                },
                {
                  label: '白名单',
                  value: 1
                },
              ]}
            />
          </FormItem>

          <FormItem label='车主姓名:' field='ownerName'>
            <Input className='select' placeholder='请输入' />
          </FormItem>

          <FormItem label='联系方式:' field='ownerPhone'>
            <Input className='select' placeholder='请输入' />
          </FormItem>

          <FormItem label='停车位号:' field='parkingPalaceNum'>
            <Input className='select' placeholder='请输入' />
          </FormItem>
        </Form>
      </div>


      {/* 新建，批量操作，导出excel */}
      <div>
        <Button onClick={() => navigate('/home/addk')} style={{ marginTop: 10, marginLeft: 650 }} type='primary'>+ 新建</Button>

        <Select
          placeholder='批量操作'
          style={{ width: 96, marginLeft: 20 }}
        >
          {options.map((option, index) => (
            <Option dropdownMenuStyle='20' key={option} disabled={index === 3} value={option}>
              {option}
            </Option>
          ))}
        </Select>

        <Button style={{ marginLeft: 20, color: '#165DFF', background: '#6dfce9' }}>导出Excel</Button>
      </div>

      <div className='span'>
        <span><IconExclamationCircle style={{ color: 'red' }} /></span>已选择<span style={{ color: 'red' }}> 0</span> 项  本次查询耗时: 0 毫秒   <span style={{ color: 'red' }}>清空</span>
      </div>

      {/* 表格选中取消 */}
      <Table
        style={{ marginTop: 20 }}
        rowKey={(res) => res.carId}
        columns={columns}
        data={data}
        rowSelection={{
          onChange: (selectedRows) => {
            // console.log('onChange:',selectedRows);
          },
          onSelect: (selected, record, selectedRows) => {
            //console.log('onSelect:', selected, record, selectedRows);
          },
        }}

        //分页
        pagination={{
          pageItemStyle: { border: "1px solid #ccc", borderRadius: '5px' },
          activePageItemStyle: { backgroundColor: '#1890ff', color: '#fff' },
          sizeCanChange: true, showTotal: true,
          bufferSize: '2', size: 'size', pageSize: '5', options: 'large',
        }}
      />

      {/* 编辑弹框 */}
      <Modal
        visible={visible}
        onOk={onOk}
        confirmLoading={confirmLoading}
        onCancel={() => { setVisible(false); form.clearFields() }}
        style={{ width: 500 }}
      >
        <Form
          form={form}
          layout='inline'
          labelCol={{
            style: { width: 120 },
          }}
          wrapperCol={{
            style: { flexBasis: 'calc(100% - 90px)', width: 300 },
          }}
          colon
        >
          <FormItem disabled label='车牌号码' field='carNum' >
            <Input placeholder='' />
          </FormItem>
          <FormItem label='月卡类型' field='monthcardType' >
            <Input placeholder='' />
          </FormItem>
          <FormItem label='月卡状态:' field='monthcardState'>
            <Select
              placeholder='请选择'
              options={[
                {
                  label: '正常',
                  value: 0
                },
                {
                  label: '暂停',
                  value: -1
                },
                {
                  label: '过期',
                  value: 1
                },
              ]}
            />
          </FormItem>
          <FormItem label='剩余天数' field='renewDate' >
            <Input placeholder='' />
          </FormItem>
          <FormItem label='车主姓名' field='ownerName' >
            <Input placeholder='' />
          </FormItem>
          <FormItem label='手机号码' field='ownerPhone' >
            <Input placeholder='' />
          </FormItem>
          <FormItem label='车位号' field='parkingPalaceNum' >
            <Input placeholder='' />
          </FormItem>
        </Form>
      </Modal>

    </div >
  )
}
export default Car